<!DOCTYPE html>
<html style="height: 100%;width:100%; margin: 0">
<head>
    <meta charset="utf-8">
</head>
<body style="height: 100%;width:100%; margin: 0">
    <div id="container" style="height: 100%;width:100%"></div>

    <script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=95f0a5688ec713adb3dd1735533f6fcb"></script>
    <script type="text/javascript" src="./echarts.min.js"></script>
    <script type="text/javascript" src="./tmap.js"></script>
    <script type="text/javascript" src="./huishui.json.js"></script>

    <script type="text/javascript">
    //处理geojson数据，自动转化为数组;
    // https://www.csdn.net/tags/OtTaEgwsMjQ4Ny1ibG9n.html
    var features = geoJson.features;
    var areaData = [], dataName = [];
    for (var i = 0; i < features.length; i++) {
        areaData.push(features[i].geometry.coordinates[0]);
        dataName.push(features[i].properties.name)
    }

    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);
    myChart.setOption({
        title: {
            text: '香港18区人口密度 （2011）',
            subtext: '人口密度数据来自Wikipedia',
            sublink: 'http://zh.wikipedia.org/wiki/%E9%A6%99%E6%B8%AF%E8%A1%8C%E6%94%BF%E5%8D%80%E5%8A%83#cite_note-12'
        },
        tooltip: {
            trigger: 'item',
            formatter: '{b}<br/>{c} (p / km2)'
        },
        tmap: {
            center: [106.76992, 25.97901],//默认中心点;
            zoom: 11,//缩放级别；
            roam: true,//是否缩放
            //mapStyle: {style: 'googlelite'}
        },
        series: [
            {
                name: '香港18区人口密度',
                type: 'custom',
                coordinateSystem: 'tmap',
                renderItem: function (params, api) {
                    var coords = areaData[params.dataIndex];
                    var points = [];
                    for (var i = 0; i < coords.length; i++) {
                        points.push(api.coord(coords[i]));
                    }
                    return {
                        type: 'polygon',
                        shape: { points },
                        style: api.style(),
                    };
                },
                label: {
                    show: true,
                    textStyle: {
                        color: "#000",
                        fontSize: 14,
                        fontWeight: "bold",
                        fontFamily: "微软雅黑"
                    }
                },
                itemStyle: {
                    color: function (params) {
                        var colorList = ['#C1232B', '#B5C334', '#FCCE10', '#E87C25', '#27727B', '#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD', '#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0', '#FCCE10', '#E87C25', '#27727B', '#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD', '#D7504B', '#C1232B', '#B5C334', '#FCCE10', '#E87C25', '#27727B', '#FE8463', '#9BCA63', '#FAD860'];
                        return colorList[params.dataIndex]
                    },
                    borderColor: "#ff0033",
                    borderWidth: 1,
                    borderType: "solid",
                    opacity: .7
                },
                emphasis: {
                    color: "#fff",
                    shadowBlur: 10,
                    shadowColor: 'rgba(0, 0, 0, 0.5)',
                    opacity: .9
                },
                data: dataName,
            }
        ]
    });
    </script>
</body>
</html>
